<template>
  <div class="stepbar">
    <div class="item">
      <div class="date">{{ stepData[0].time }}</div>
      <div :class="stepData[0].time ? 'schedule' : 'schedule_active'"></div>
      <div class="title">
        <div class="icon" v-if="stepData[0].time">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="6"
            height="5"
            viewBox="0 0 6 5"
            fill="none"
          >
            <circle cx="3.16666" cy="2.5" r="2.5" fill="#61F4E6" />
          </svg>
        </div>
        <div class="name"><span v-if="!stepData[0].time"></span>入手术室</div>
      </div>
    </div>
    <div class="item">
      <div class="date">{{ stepData[1].time }}</div>
      <div :class="stepData[1].time ? 'schedule' : 'schedule_active'"></div>
      <div class="title">
        <div class="icon" v-if="stepData[1].time">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="6"
            height="5"
            viewBox="0 0 6 5"
            fill="none"
          >
            <circle cx="3.16666" cy="2.5" r="2.5" fill="#61F4E6" />
          </svg>
        </div>
        <div class="name"><span v-if="!stepData[1].time"></span>入手术间</div>
      </div>
    </div>
    <div class="item">
      <div class="date">{{ stepData[2].time }}</div>
      <div :class="stepData[2].time ? 'schedule' : 'schedule_active'"></div>
      <div class="title">
        <div class="icon" v-if="stepData[2].time">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="6"
            height="5"
            viewBox="0 0 6 5"
            fill="none"
          >
            <circle cx="3.16666" cy="2.5" r="2.5" fill="#61F4E6" />
          </svg>
        </div>
        <div class="name"><span v-if="!stepData[2].time"></span>麻醉开始</div>
      </div>
    </div>
    <div class="item">
      <div class="date">{{ stepData[3].time }}</div>
      <div :class="stepData[3].time ? 'schedule' : 'schedule_active'"></div>
      <div class="title">
        <div class="icon" v-if="stepData[3].time">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="6"
            height="5"
            viewBox="0 0 6 5"
            fill="none"
          >
            <circle cx="3.16666" cy="2.5" r="2.5" fill="#61F4E6" />
          </svg>
        </div>
        <div class="name"><span v-if="!stepData[3].time"></span>手术开始</div>
      </div>
    </div>
    <div class="item">
      <div class="date">{{ stepData[4].time }}</div>
      <div :class="stepData[4].time ? 'schedule' : 'schedule_active'"></div>
      <div class="title">
        <div class="icon" v-if="stepData[4].time">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="6"
            height="5"
            viewBox="0 0 6 5"
            fill="none"
          >
            <circle cx="3.16666" cy="2.5" r="2.5" fill="#61F4E6" />
          </svg>
        </div>
        <div class="name">
          <span v-if="!stepData[4].time"
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              width="6"
              height="5"
              viewBox="0 0 6 5"
              fill="none"
            >
              <circle
                cx="3.16666"
                cy="2.5"
                r="2.5"
                fill="#61F4E6"
              /></svg></span
          >手术结束
        </div>
      </div>
    </div>
    <div class="item">
      <div class="date">{{ stepData[5].time }}</div>
      <div :class="stepData[5].time ? 'schedule' : 'schedule_active'"></div>
      <div class="title">
        <div class="icon" v-if="stepData[5].time">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="6"
            height="5"
            viewBox="0 0 6 5"
            fill="none"
          >
            <circle cx="3.16666" cy="2.5" r="2.5" fill="#61F4E6" />
          </svg>
        </div>
        <div class="name">
          <span> 麻醉结束 </span>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="date">{{ stepData[6].time }}</div>
      <div :class="stepData[6].time ? 'schedule' : 'schedule_active'"></div>
      <div class="title">
        <div class="icon" v-if="stepData[6].time">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="6"
            height="5"
            viewBox="0 0 6 5"
            fill="none"
          >
            <circle cx="3.16666" cy="2.5" r="2.5" fill="#61F4E6" />
          </svg>
        </div>
        <div class="name">出手术间</div>
      </div>
    </div>
    <div class="item">
      <div class="date">{{ stepData[7].time }}</div>
      <div :class="stepData[7].time ? 'schedule' : 'schedule_active'"></div>
      <div class="title">
        <div class="icon" v-if="stepData[7].time">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="6"
            height="5"
            viewBox="0 0 6 5"
            fill="none"
          >
            <circle cx="3.16666" cy="2.5" r="2.5" fill="#61F4E6" />
          </svg>
        </div>
        <div class="name">出手术室</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
const props = defineProps({
  stepData: {
    type: Array,
    default: [],
  },
});
</script>
<style scoped lang="scss">
.stepbar {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 前三个元素自适应，后五个等分 */
  .item-large {
    text-align: center; /* 中心对齐文本 */
  }
  .item {
    padding: 4px;
    text-align: center; /* 中心对齐文本 */
    .schedule {
      height: 6px;
      border-radius: 100px;
      background: var(--Brand-Lan-Brand6-Hover, #61f4e6);
      box-shadow: 0px 4px 11.6px 0px rgba(28, 252, 255, 0.29),
        0px 14px 22.6px 4px rgba(144, 255, 228, 0.24);
      
    }
    .schedule_active {
      border-radius: 100px;
      height: 6px;
      background: var(--text-icon-font-wh-422, rgba(255, 255, 255, 0.22));
      box-shadow: 0px 4px 11.6px 0px rgba(255, 255, 255, 0.2),
        0px 14px 22.6px 4px rgba(255, 255, 255, 0.03);
      
      color: #fff;

    }
    .date {
      text-align: left;
      color: #cbcbcb;
      /* Title/Medium */
      font-family: "Microsoft YaHei";
      font-size: 16px;
      height: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: 24px; /* 150% */
    }
    .title {
      display: flex;
      .name {
        text-align: left;
        color: #cbcbcb;
        font-family: "Microsoft YaHei";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        margin-left: 5px;
      }
    }
  }
}
</style>
